前言

大家好，我是 Micro Jordan ，目前在一家小公司擔任前端工程師（偶爾寫寫後端）。在數年前偶然知道了 Flutter 這套跨平台的 APP 開發框架，但當時一直沒有學習的衝動... 因此想要趁著今年鐵人賽的機會，嘗試從零開始學習 Flutter ，也預計會與大家一起完成一個專案，把自己學習新東西的潛能完全解放出來 XD

換言之，這系列的文章會偏向入門、想把玩看看的新手為主，希望可以在自我挑戰、整理文件的過程中，也能與讀者一起變強！！

Flutter 簡介

Flutter 是由 Google 於 2017 年所開發的跨平台應用程式框架，既然強調跨平台也就代表同一份 code 可以在多個不同的平台之間執行（兼容 Android / iOS / Web 等多個平台）。

以往在開發應用程式有需要支援多平台的需求時，就必須專為不同平台寫不同的程式碼。假設我想要寫一個支援多平台的應用時，面對 Android 的使用者可能會用 Kotlin 進行開發；面對 iOS 的使用者時得再使用 Swift 寫一次，如還有 Web 的需求則需要再額外產出網頁。如此一來，為了產出同一個應用程式需要寫三份不同的程式碼，除了學習成本較高，開發與更新時辰也會拉的很長，更別說要踩各種語言的坑所花的 debug 時間了...

於是 Flutter 的出現也解決了這個痛點，僅需寫一份程式碼就能讓您的應用程式兼容於各個平台，怎麼聽都超棒的對吧！

跨平台開發？怎麼好像不是第一次聽到？

跨平台的框架早就不是一個全新的概念了。在數年以前 Facebook 就曾經發表過另一款的跨平台開發框架 React Native，是基於 React.js 這個前端框架的語法延伸，讓開發者可以使用接近 React 的語法來開發跨平台的應用程式。那 Flutter 的存在意義到底在哪呢？

要了解這個問題前，我們先來看看使用原生語言開發與使用跨平台框架之間的差距

原生軟體開發套件（SDK）

使用原生軟體開發套件時，使用的是相應平台所支持的開發工具和語言，你的應用程式可輕易的呼叫平台提供的組件 (按鈕、文字、圖片等) 並渲染於平台的 canvas 上以及調用平台的服務 (相機、藍芽、GPS等) ，因為是原生支援的套件無須考慮效能減損的問題。

比如 Android 就是使用 Kotlin 或 Java 呼叫 Android SDK 來開發應用程式；相對的 iOS 則是透過 Swift 或 Objective-C 來呼叫 iOS SDK 來進行開發。但相對來說，使用平台提供的 SDK 代價就是需要學習各平台的原生語言。

使用 WebViews 達成跨平台

最早的跨平台開發是基於 Javascript 與 Webviews 的，如 Apache Cordova。可以粗略的理解成就是在應用程式中開發網頁，使用 HTML / CSS 的 Web UI 來模擬應用程式的樣貌，但在外觀上便會與原生開發出來的結果也有所差異。

也由於 Web 原生並不支援調用手機的服務，因此需要透過一層的 Bridge 去轉換讓 Javascript 能調用這些硬體服務。也正是因為如此，使其的效能與原生的差距很大。

React Native

React Native 定義了數個 UI Core Component分別對應至 Android 與 iOS 的原生組件(Native Component)，這不僅很好的縮小了前述的應用外觀上與原生差距過大的問題，也讓寫出來的應用實際是執行在原生平台的框架中。

我們來看看 React Native 官網所提供的一個關於按鈕示例!

左側是 Android 上的顯示效果 / 右側則是在 iOS 上的結果。發現了嗎？同樣的程式碼在不同平台其實還是會有顯示差異。原因在於 React Native 對應的是各平台上的「原生組件」，又各平台間的原生組件預設顯示樣式不同，才導致明明是同樣的程式碼卻長得不太一樣。

另一個問題在於這類的跨平台架構中間仍有透過一層 Bridge 將 Javascript 服務轉換成原生的服務，因此每當 Bridge 被呼叫時會造成一定的效能減損。

舉例來說，我們普遍手機螢幕的更新頻率為 60Hz，也就是每秒手機會渲染 60 個畫面，當我們進行在捲動畫面時，React Native 會為了達到每秒 60 幀的更新畫面而去頻繁的呼叫 Widget，也就是需要通過 60 次的 Bridge 轉換才能達成。多數 React Native 的邏輯皆是在 javascript thread 完成的，但 javascript 為單線程，因此一旦同時進行了多個操作會造成塞車，塞車就會引發某些掉幀的情形出現，變相就會讓使用者覺得畫面卡頓了一下。

當然 React Native 官方也知道這個問題，並提出了數個解決這些效能問題的方式。

別誤會！！我並沒有說 React Native 不好，在廣大的社群支持第三方套件的開發使其在開發上有許多的資源可以引用，在學習上也得益於 Javascript 與 React 使其對於前端工程的入門的門檻較低，可以很快的投入開發。我自己也是先從 React Native 開始學起的，只是我們今天在著重討論的是各種跨平台架構實現方法而已！！

Flutter

Flutter 的架構移除了中間轉換 Javascript 邏輯的 Bridge，取而代之的是使用 Dart語言將寫好的程式碼編譯成原生應用，並透過渲染引擎顯示以達成接近原生應用的效能。

缺少了平台對應的 OEM Widget，那 Flutter 要怎麼去開發呢？別擔心，Flutter 官方提供了一系列完整的 Widget，想要 android 風格的可以選用 Material；iOS 風格的則選用 Cupertino，並且兩者各自對接到平台的底層，才使得效能上能更接近原生的效果，之後我們的文章也都會碰到。

另一好處在於，由於渲染畫面的動作在應用端就完成，而不是像 React Native 一樣去將某個定義好的元件去對應至平台提供的元件。因此可以避免不同平台間的預設樣式問題。

我們來看看由 Jetbrains 所統計從 2019 至 2022 年各跨平台框架趨勢圖，不難看出 Flutter 的使用趨勢逐年增高。因此想要進入跨平台開發時，相信在談完 Flutter 的優勢以及熱門程度，選擇它絕對不會錯拉 👍

今日總結

當然以上的內容皆是環繞在跨平台架構的討論上，總結一下 Flutter 的主要優勢
1. 跨平台一致性：無論是在 Android / iOS 上，應用程式的外觀與行為得以保持一致
2. Hot Reload：開發者及時更新程式碼便能即時看到當前程式碼的運行結果，而無需重新啟動服務，提高開發速度
3. 高性能：使用Dart語言，可提前將程式碼進行編譯，而無需透過 Bridge 來取用本機的服務，因此有助於打造高性能、流暢的應用程式

這裡一定有人會有疑問，Dart 既然會將程式碼進行編譯，那又是怎麼做到 Hot Reload 的呢？

簡單來說，Dart 屬於編譯語言因此也意味著在撰寫前必須先經過編譯才能執行(AOT- Ahead Of Time)，但也兼具直譯語言的特性，能做到即時的編譯 (JIT- Just In Time) 。所以 Flutter 的呼聲才可以這麼高，超級犯規的對吧 XD

其他還有很多優點並沒有一一提及，那其實最大的優勢是Flutter 是由 Google 所開發的東西，所以可以很放心的寄託 Google 持續的開發與更新，讓 Flutter 越來越壯大！

明天我們會花幾天的時間來講解 Dart 的基礎語法知識，歡迎大家與我一起來學習。明天見拉～